<template>
  <view>
    <view class="loading">
      <view class="loading__image--mgj loading__image loading__box">
        <view class="loading__slip--mgj loading__slip loading__box"></view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {}
  },
  methods: {},
  onLoad() {
    this.$store.dispatch('login')
  }
}
</script>

<style>

@keyframes loadingRotate {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}

.loading {
  position: fixed;
  display: flex;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  align-items: center;
  align-content: center;
}

.loading__image {
  position: relative;
  margin: 0 auto;
  pointer-events: auto;
}

.loading__image--mgj {
  background-image: url(https://s10.mogucdn.com/mlcdn/c45406/170607_5241335cb37ka3ab7781ddh504ggh_200x200.png);
}

.loading__image--mall {
  background-image: url(https://s10.mogucdn.com/mlcdn/c45406/171023_625g128f20b5k0aace38jgghe737b_200x200.png);
}

.loading__slip {
  animation: loadingRotate 1050ms infinite;
}

.loading__slip--mgj {
  background-image: url(http://s10.mogucdn.com/p1/160715/upload_ifrgmmzwmyydknldhezdambqmeyde_200x200.png);
}

.loading__slip--mall {
  background-image: url(https://s10.mogucdn.com/mlcdn/c45406/170810_6la1hibih5861b4i2j0j5e4jgl3ee_200x200.png);
}

.loading__box {
  width: 200rpx;
  height: 200rpx;
  background-repeat: no-repeat;
  background-size: cover;
}
</style>
